<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div class="box">box1</div>
<div class="box">box2</div>
<div id="nav">
  <ul>
    <li>li1</li>
    <li>li2</li>
  </ul>
</div>

<script>
  // var boxs = document.getElementsByClassName('box');
  // console.log(boxs);  // => HTMLCollection(2) [div.box, div.box]
  // var firstBox = document.querySelector('.box');
  // console.log(firstBox); // => <div class="box">box1</div>
  // var nav = document.querySelector('#nav');
  // console.log(nav);  // => <div id="nav"><ul> <li>li1</li> <li>li2</li> </ul></div>
  // var firstLi = document.querySelector('li')
  // console.log(firstLi); // => <li>li1</li>

  var lis = document.querySelectorAll('li');
  var boxs = document.querySelectorAll('.box');
  console.log(lis); // => NodeList(2) [li, li]
  console.log(boxs);// => NodeList(2) [div.box, div.box]
</script>
</body>
</html>